<template>
  <div class="index">
    <el-row :gutter="20" class="header">
      <el-col :span="8">
        <div class="grid-content address">
          <img src="../assets/location@2x.png" alt />
          <span>郑州市金水区</span>
        </div>
      </el-col>
      <el-col :span="14" class="searchwrap">
        <div class="grid-content">
          <input type="text" placeholder="请输入班级、课程或教师姓名" class="inputsearch" />
          <img src="../assets/search@2x.png" alt srcset class="search" />
        </div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bell">
          <img src="../assets/bell.png" alt />
        </div>
      </el-col>
    </el-row>
    <!-- 轮播图 -->
    <div class="block">
      <el-carousel height="4.2rem" arrow="never" :interval="2000">
        <el-carousel-item v-for="(item,index) in sliders" :key="index">
          <img src="../assets/index.banner.png" alt class="bannerImg" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 轮播图 -->
    <!-- 公告通知 -->
    <el-row :gutter="20" class="noticewrap">
      <el-col :span="8">
        <div class="grid-content notice">
          <p>系统公告</p>
          <img src="../assets/sound@2x.png" alt srcset />
        </div>
      </el-col>
      <el-col :span="16">
        <div
          class="grid-content noticeContent Notice"
          v-for="(item,index) in Notice"
          :key="index"
        >{{item.title}}</div>
      </el-col>
    </el-row>
    <!-- 功能菜单 -->
    <div class="block">
      <el-carousel trigger="click" height="120px" arrow="never" id="menus">
        <el-carousel-item v-for="item in 1" :key="item">
          <el-row :gutter="20" class="menuList">
            <el-col :span="6" class="menu1">
              <div class="grid-content bg-purple">
                <img src="../assets/gangwei.png" alt />
                <p>岗位学习</p>
              </div>
            </el-col>
            <el-col :span="6" class="menu1">
              <div class="grid-content bg-purple">
                <img src="../assets/pinggu.png" alt />
                <p>综合评估</p>
              </div>
            </el-col>
            <el-col :span="6" class="menu1">
              <div class="grid-content bg-purple">
                <img src="../assets/zhibo.png" alt />
                <p>政策解读</p>
              </div>
            </el-col>
            <el-col :span="6" class="menu1">
              <div class="grid-content bg-purple">
                <img src="../assets/zhibo.png" alt />
                <p>政策解读</p>
              </div>
            </el-col>
          </el-row>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- tab选项卡 -->
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <!-- :tab-position="top" -->
          <el-tabs style="height: 200px;" class="tab" :stretch="true">
            <el-tab-pane label="最近开班" class="tab1">
              <el-row class="list">
                <el-col :span="8" class="listImg">
                  <div class="grid-content bg-purple">
                    <img src="../assets/9420.png" alt />
                  </div>
                </el-col>
                <el-col :span="16" class="listDetile">
                  <p class="listTitle">2019高三班主任综合提升班</p>
                  <p class="techName pxaddress">培训地点：郑州市</p>
                  <p class="status pxTime">培训时间：2019-9-31~2019-11-8</p>
                  <p class="stucomment object">报名对象：全体教师</p>
                </el-col>
              </el-row>
              <el-row class="list">
                <el-col :span="8" class="listImg">
                  <div class="grid-content bg-purple">
                    <img src="../assets/1308040.png" alt />
                  </div>
                </el-col>
                <el-col :span="16" class="listDetile">
                  <p class="listTitle">2019高三班主任综合提升班</p>
                  <p class="techName pxaddress">培训地点：郑州市</p>
                  <p class="status pxTime">培训时间：2019-9-31~2019-11-8</p>
                  <p class="stucomment object">报名对象：全体教师</p>
                </el-col>
              </el-row>
              <el-row class="list">
                <el-col :span="8" class="listImg">
                  <div class="grid-content bg-purple">
                    <img src="../assets/d91e.png" alt />
                  </div>
                </el-col>
                <el-col :span="16" class="listDetile">
                  <p class="listTitle">2019高三班主任综合提升班</p>
                  <p class="techName pxaddress">培训地点：郑州市</p>
                  <p class="status pxTime">培训时间：2019-9-31~2019-11-8</p>
                  <p class="stucomment object">报名对象：全体教师</p>
                </el-col>
              </el-row>
              <el-row class="list">
                <el-col :span="8" class="listImg">
                  <div class="grid-content bg-purple">
                    <img src="../assets/9420.png" alt />
                  </div>
                </el-col>
                <el-col :span="16" class="listDetile">
                  <p class="listTitle">2019高三班主任综合提升班</p>
                  <p class="techName pxaddress">培训地点：郑州市</p>
                  <p class="status pxTime">培训时间：2019-9-31~2019-11-8</p>
                  <p class="stucomment object">报名对象：全体教师</p>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="推荐课程" class="tab1">
              <el-row class="list">
                <el-col :span="8" class="listImg">
                  <div class="grid-content bg-purple">
                    <img src="../assets/1308040.png" alt />
                  </div>
                </el-col>
                <el-col :span="16" class="listDetile">
                  <p class="listTitle">2019高三班主任综合提升班</p>
                  <p class="techName pxaddress">培训地点：郑州市</p>
                  <p class="status pxTime">培训时间：2019-9-31~2019-11-8</p>
                  <p class="stucomment object">报名对象：全体教师</p>
                </el-col>
              </el-row>
              <el-row class="list">
                <el-col :span="8" class="listImg">
                  <div class="grid-content bg-purple">
                    <img src="../assets/d91e.png" alt />
                  </div>
                </el-col>
                <el-col :span="16" class="listDetile">
                  <p class="listTitle">2019高三班主任综合提升班</p>
                  <p class="techName pxaddress">培训地点：郑州市</p>
                  <p class="status pxTime">培训时间：2019-9-31~2019-11-8</p>
                  <p class="stucomment object">报名对象：全体教师</p>
                </el-col>
              </el-row>
              <el-row class="list">
                <el-col :span="8" class="listImg">
                  <div class="grid-content bg-purple">
                    <img src="../assets/9420.png" alt />
                  </div>
                </el-col>
                <el-col :span="16" class="listDetile">
                  <p class="listTitle">2019高三班主任综合提升班</p>
                  <p class="techName pxaddress">培训地点：郑州市</p>
                  <p class="status pxTime">培训时间：2019-9-31~2019-11-8</p>
                  <p class="stucomment object">报名对象：全体教师</p>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="精品图书" class="tab1">
              <el-row class="list">
                <el-col :span="8" class="listImg">
                  <div class="grid-content bg-purple">
                    <img src="../assets/d91e.png" alt />
                  </div>
                </el-col>
                <el-col :span="16" class="listDetile">
                  <p class="listTitle">2019高三班主任综合提升班</p>
                  <p class="techName pxaddress">培训地点：郑州市</p>
                  <p class="status pxTime">培训时间：2019-9-31~2019-11-8</p>
                  <p class="stucomment object">报名对象：全体教师</p>
                </el-col>
              </el-row>
              <el-row class="list">
                <el-col :span="8" class="listImg">
                  <div class="grid-content bg-purple">
                    <img src="../assets/d91e.png" alt />
                  </div>
                </el-col>
                <el-col :span="16" class="listDetile">
                  <p class="listTitle">2019高三班主任综合提升班</p>
                  <p class="techName pxaddress">培训地点：郑州市</p>
                  <p class="status pxTime">培训时间：2019-9-31~2019-11-8</p>
                  <p class="stucomment object">报名对象：全体教师</p>
                </el-col>
              </el-row>
              <el-row class="list">
                <el-col :span="8" class="listImg">
                  <div class="grid-content bg-purple">
                    <img src="../assets/9420.png" alt />
                  </div>
                </el-col>
                <el-col :span="16" class="listDetile">
                  <p class="listTitle">2019高三班主任综合提升班</p>
                  <p class="techName pxaddress">培训地点：郑州市</p>
                  <p class="status pxTime">培训时间：2019-9-31~2019-11-8</p>
                  <p class="stucomment object">报名对象：全体教师</p>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
    <!-- tabbar -->
    <!-- <el-row id="tabbar">
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <img src="../assets/home-fill.png" alt />
          <p>首页</p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light">
          <img src="../assets/book.png" alt />
          <p>课程</p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <img src="../assets/crown.png" alt />
          <p>书店</p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light">
          <img src="../assets/user@2x.png" alt />
          <p>我的</p>
        </div>
      </el-col>
    </el-row>-->
    <commonfoot></commonfoot>
  </div>
</template>

<script>
import commonfoot from "../components/footbar";
export default {
  name: "block",
  data() {
    return {
      sliders: [
        // { img: "../assets/index.banner.png" },
        // { img: "../assets/index.zhibo.png" },
        // { img: "../assets/index.zhibo.png" }
      ],
      Notice: [],
      url: domain.testUrl
    };
  },
  created() {
    this.gonggao();
    this.lunbotu();
  },
  methods: {
    gonggao() {
      var that = this;
      this.$axios.post(that.url + "/gonggao/get_list").then(res => {
        console.log(res.data.data.data, "公告");
        this.Notice = res.data.data.data;
      });
    },
    lunbotu() {
      let that = this;
      this.$axios.get(that.url + "/lunbotu/get_lunbotu_list").then(res => {
        console.log(res.data.data);
        that.sliders = res.data.data;
        console.log(that.sliders,'00000')
      });
    }
  },
  components: {
    commonfoot
  }
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  font-size: 14px;
}
.index {
  position: relative;
  background: #f8f8f8;
}

//搜索框

.header {
  width: 100%;
  margin-bottom: 0;
  position: fixed;
  top: 0.3rem;
  left: 0;
  z-index: 2001;
}
.searchwrap {
  background: #636161;
  opacity: 0.95;
}
.address {
  font-size: 0.12rem;
  line-height: 0.36rem;
}
.address img {
  width: 0.24rem;
  height: 0.28rem;
  overflow: hidden;
  float: left;
  margin: 0.11rem 0rem;
}
.address span {
  color: #fff;
  margin: 0.11rem 0;
  line-height: 0.48rem;
}
.inputsearch {
  width: 90%;
  height: 36px;
  background: #636161;
  color: #ffffff;
}
.search {
  width: 13px;
  height: 13px;
  overflow: hidden;
  margin-top: 12px;
  float: right;
}
.bell {
  text-align: center;
}
.bell img {
  width: 11px;
  height: 14px;
  overflow: hidden;
  margin-top: 11px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
// 轮播图
.bannerImg {
  width: 7.5rem;
  height: 4.4rem;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 219px;
  text-align: center;
  margin: 0;
}
// 公告
.noticewrap {
  height: 0.7rem;
  background: #fff;
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid #f8f8f8;
  padding: 0;
}

.notice p {
  line-height: 36px;
  float: left;
  margin: 0 0.2rem;
}
.notice img {
  width: 0.32rem;
  height: 0.32rem;
  margin-top: 10px;
  float: left;
}
.el-row {
  margin-bottom: 0.1rem;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
//   公告内容
.noticeContent {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 0.72rem;
}
// 菜单
#menus {
  height: 2.8rem;
  //   border: 1px solid red;
  padding-top: 20px;
  background: #fff;
}
.menu1 div {
  text-align: center;
}
.menu1 div img {
  width: 1.2rem;
  height: 1.2rem;
  overflow: hidden;
  margin: 0 auto;
}
.menu1 div p {
  font-size: 0.24rem;
  line-height: 0.5rem;
}
// tab选项卡
.el-tabs__item.is-active {
  color: #ed1a21;
}
.tab {
  // border: 1px solid red;
  background: #fff;
  text-align: center;
}
.tab .tab1 {
  //   width: 33.333%;
  text-align: center;
}
.list {
  padding: 0 0.1rem;
  margin-top: 0.5rem;
}
.list:last-child {
  margin-bottom: 1.5rem;
}
.listImg {
  width: 2.4rem;
  height: 1.6rem;
  overflow: hidden;
}
.listImg div img {
  width: 100%;
}
// 列表简介
.listDetile {
  //   float: left;
  // background:red;
  text-align: left;
  text-indent: 0.25rem;
}
.listTitle {
  font-size: 0.22rem;
  line-height: 0.4rem;
  color: #262222;
  font-weight: 600;
}
.techName {
  font-size: 0.18rem;
  line-height: 0.35rem;
  color: #b7b0b0;
  font-weight: 500;
}
.status {
  font-size: 0.18rem;
  line-height: 0.35rem;
  color: #b7b0b0;
  font-weight: 500;
}
.stucomment {
  font-size: 0.18rem;
  line-height: 0.35rem;
  color: #ea4e4f;
  font-weight: 500;
}
// tabbar
#tabbar {
  width: 100%;
  height: 1rem;
  position: fixed;
  bottom: 0;
  left: 0;
  text-align: center;
  border-top: 1px solid #f2f2f2;
  background: white;
}
#tabbar img {
  width: 0.4rem;
  height: 0.4rem;
  padding-top: 0.05rem;
}
#tabbar p {
  font-size: 0.18rem;
  margin-top: 0.16rem;
}
</style>
<style lang="less">
.index {
  .mint-tabbar {
    background-image: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(#d9d9d9),
      color-stop(50%, #d9d9d9),
      color-stop(50%, transparent)
    );
    background-image: linear-gradient(
      180deg,
      #d9d9d9,
      #d9d9d9 50%,
      transparent 50%
    );
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: top left;
    position: relative;
    background-color: #fafafa;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    right: 0;
    bottom: 0;
    left: 0;
    position: fixed;
    text-align: center;
  }
}
</style>